<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import { useAntdForm, useFormRules } from '@/hooks/common/form';
import { $t } from '@/locales';

defineOptions({
  name: 'HolidayOperateDrawer'
});

interface Holiday {
  id?: number;
  holidayName: string;
  currencyCode: string;
  holidayDate: string;
  description?: string;
}

interface Props {
  /** the type of operation */
  operateType: AntDesign.TableOperateType;
  /** the edit row data */
  rowData?: Holiday | null;
}

const props = defineProps<Props>();

interface Emits {
  (e: 'submitted'): void;
}

const emit = defineEmits<Emits>();

const visible = defineModel<boolean>('open', {
  default: false
});

const { formRef, validate, resetFields } = useAntdForm();
const { defaultRequiredRule } = useFormRules();

const title = computed(() => {
  const titles: Record<AntDesign.TableOperateType, string> = {
    add: '新增假日',
    edit: '编辑假日'
  };
  return titles[props.operateType];
});

type Model = Pick<Holiday, 'holidayName' | 'currencyCode' | 'holidayDate' | 'description'>;

const model = ref(createDefaultModel());

function createDefaultModel(): Model {
  return {
    holidayName: '',
    currencyCode: '',
    holidayDate: '',
    description: ''
  };
}

type RuleKey = Exclude<keyof Model, 'description'>;

const rules: Record<RuleKey, App.Global.FormRule> = {
  holidayName: defaultRequiredRule,
  currencyCode: defaultRequiredRule,
  holidayDate: defaultRequiredRule
};

function handleInitModel() {
  model.value = createDefaultModel();

  if (props.operateType === 'edit' && props.rowData) {
    Object.assign(model.value, props.rowData);
  }
}

function closeDrawer() {
  visible.value = false;
}

async function handleSubmit() {
  await validate();
  // 实现假日的创建和更新API调用
  console.log('提交假日数据:', model.value);

  window.$message?.success(props.operateType === 'edit' ? '更新成功' : '新增成功');
  closeDrawer();
  emit('submitted');
}

watch(visible, () => {
  if (visible.value) {
    handleInitModel();
    resetFields();
  }
});
</script>

<template>
  <ADrawer v-model:open="visible" :title="title" :width="360">
    <AForm ref="formRef" layout="vertical" :model="model" :rules="rules">
      <AFormItem :label="$t('page.manage.holiday.holidayName')" name="holidayName">
        <AInput v-model:value="model.holidayName" :placeholder="$t('page.manage.holiday.form.holidayName')" />
      </AFormItem>
      <AFormItem :label="$t('page.manage.holiday.currencyCode')" name="currencyCode">
        <AInput v-model:value="model.currencyCode" :placeholder="$t('page.manage.holiday.form.currencyCode')" />
      </AFormItem>
      <AFormItem :label="$t('page.manage.holiday.holidayDate')" name="holidayDate">
        <ADatePicker
          v-model:value="model.holidayDate"
          :placeholder="$t('page.manage.holiday.form.holidayDate')"
          class="w-full"
        />
      </AFormItem>
      <AFormItem :label="$t('page.manage.holiday.description')" name="description">
        <ATextarea
          v-model:value="model.description"
          :placeholder="$t('page.manage.holiday.form.description')"
          :rows="3"
        />
      </AFormItem>
    </AForm>
    <template #footer>
      <div class="flex-y-center justify-end gap-12px">
        <AButton @click="closeDrawer">{{ $t('common.cancel') }}</AButton>
        <AButton type="primary" @click="handleSubmit">{{ $t('common.confirm') }}</AButton>
      </div>
    </template>
  </ADrawer>
</template>

<style scoped></style>
